import React, { Component } from 'react';
import { Dimensions, View, Image,ActionSheetIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import Toast from 'react-native-root-toast';
import ImagePicker from 'react-native-image-crop-picker';
import {UserData} from '../Global';

const SCREEN_WIDTH = Dimensions.get('window').width;

export default class DisplayAnImage extends Component {

    constructor() {
        super();
        this.state = {
          image: UserData.user_head,
          base64: null,
        };
    }

    static navigationOptions = ({ navigation }) =>{
        return {
            title: '个人头像',
            headerTintColor:'#fff',
            headerTransparent:true,
            headerRight:(
                <Icon name="ios-more" size={26} color='#fff' style={{marginRight:10}}
                onPress={()=>navigation.state.params.showActionSheet()}
                />
            ),
        }

    };
    componentDidMount() {
        this.props.navigation.setParams({showActionSheet:this.showActionSheet})
    }
    showActionSheet = ()=>{
        ActionSheetIOS.showActionSheetWithOptions({
            options: ['拍照','从相册中选择', '取消'],
            cancelButtonIndex: 2,
            tintColor:'#000',
          },
          (buttonIndex) => {
            if (buttonIndex === 0) {
                ImagePicker.openCamera({
                    width: 400,
                    height: 400,
                    cropping: true,
                  }).then(image => {
                    console.log(image);
                  });
            }
            if (buttonIndex === 1) {
                ImagePicker.openPicker({
                    width: 400,
                    height: 400,
                    cropping: true,
                    includeBase64: true,
                  }).then(image => {
                    this.setState({
                        image: `data:${image.mime};base64,`+ image.data, width: image.width, height: image.height,
                    });
                    this.uploadImg(image.data);
                  });
            }
          });
    }
    uploadImg = async (base64)=>{
        let {user_id,access_token} = UserData;
        //let body= JSON.stringify({user_id,access_token,login_type:1,img_url:base64});
        let body=`user_id=${user_id}&access_token=${access_token}&login_type=2&img_url=${base64}`;
        console.log(body);
        let opt={body,method: 'POST',headers: {'content-type': 'Content-Type: application/x-www-form-urlencoded'},};
        try{
            let response = await fetch('http://viquan.droyee.com/Qiniu/QiniuImg/save_img',opt);
            let responseJson = await response.json();
			if(responseJson.status==0){
                Toast.show('已上传');
			}else{
                Toast.show(responseJson.msg);
			}

        }catch(err){
            Toast.show(err+'!');
        }
    }
    render() {
        return (
        <View style={{
            flex:1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor:'#000'
        }}>
            <Image
                style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH}}
                source={{uri: this.state.image}}
            />
        </View>
        );
  }
}